<template>
  <div class="member-wrap" style="padding-top: 50px;">
    <van-nav-bar
    title="会员中心"
    left-arrow
    fixed
    right-text="添加会员"
    @click-right="$router.push({name:'storeMineMemberList',params: { store_id : store_id }})"
    @click-left="$router.go(-1)"
  />
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="fetch"
  >
    <van-row class="userList" v-for="(item,index) in userData" :key="index" type="flex"  justify="space-between">
        <van-col span="4">
          <van-image
              round
              width="3rem"
              height="3rem"
              :src="item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
            />
        </van-col>
        <van-col span="16">
          <div class="van-multi-ellipsis--l2">ID: {{ item.id }} 昵称 : {{ item.nickname }}</div>
        </van-col>
        <van-col span="4" style="line-height: 3rem" class="text-align"></van-col>
      </van-row>
  </van-list>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:['store_id'],
  name: 'Member',
  data() {
    return {
      show: false,
      loading: false,
      finished: false,
      page: null,
      userData: null
    }
  },
  methods:{
    async fetch(){
      let params = {
        token: sessionStorage.getItem('token'),
        page: this.page +1
      }
      const res = await axios.get('/api/store/manager/members',{params});
      if(res.data.data.current_page == 1){
        this.userData = res.data.data.data;
      }else {
        this.userData = [...this.userData,...res.data.data.data];
      }
      this.page = res.data.data.current_page;
      this.loading = false;
      if(this.page >=  res.data.data.last_page){
        this.finished = true;
        this.loading = false;
      }
    }
  },
  created() {
    this.fetch()
  },
}
</script>
<style lang="less">

.member-wrap {
  .userList {
    background: white;
    margin-bottom: 5px;
    padding: 0.7692rem 1.1538rem
 } 
}
</style>